<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div :title="msg">hehe</div>

      <button v-show="index > 0" @click="index--">上一页</button>
      <div>
        <img :src="list[index]" alt="" />
      </div>
      <button v-show="index < list.length - 1" @click="index++">下一页</button>
    </div>
    <script src="./vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          msg: '呵呵哒。。。',
          index: 0,
          list: [
            './imgs/11-00.gif',
            './imgs/11-01.gif',
            './imgs/11-02.gif',
            './imgs/11-03.gif',
            './imgs/11-04.png',
            './imgs/11-05.png',
          ],
        },
        // methods: {
        //   // 上一页
        //   prev() {
        //     if (this.index <= 0) return;
        //     this.index--;

        //     // if (this.index > 0) {
        //     //   this.index --
        //     // }
        //   },
        //   // 下一页
        //   next() {
        //     if (this.index >= this.list.length - 1) return;
        //     this.index++;

        //     // if (this.index < this.list.length - 1) {
        //     //   this.index++
        //     // }
        //   },
        // },
      });
    </script>
  </body>
</html>
